<template>
  <view>
    <uni-popup ref="arrangeDetails" type="bottom" zindex>
      <view class="box-con padding">
        <view class="top-title margin-bottom">
          <view class="modalTitle pad_cl text-bold text-xll">安排明细</view>
        </view>
        <view class="middle-con padding-sm">
          <view class="alltop flex align-center">
            <view class="text-lg text-c3">全部</view>
            <view class="flex text-df color71 margin-left">
              <text class="margin-left">888房</text>
              <text class="margin-left">999房</text>
            </view>
          </view>
          <view class="flex flex-wrap">
            <view class="xqul margin-top-sm flex ampai-mar flex-direction" v-for="(item,index) in list" :key="index">
              <view class="conli flex flex-direction">
                <view class="padding-xs flex  justify-between align-center">
                  <view class="text-c3 text-df">{{item.title}}</view>
                  <view class="flex flex-direction text-xs clolorLv text-right">
                    <text class="cuIcon-close closBtn text-df" style="color: #CFCFCF" @click.stop="deleteAp"></text>
                    <text>{{item.level}}</text>
                    <text>{{item.sex}}</text>
                  </view>
                </view>
                <view class="qian-red text-df margin-top-xs"><text style="font-size: 16rpx;">￥</text>{{item.pic}}</view>
                <view class="padding-xs text-center">
                  <view class="tiemli">{{item.time}}</view>
                </view>
              </view>
              <view class="text-c9 text-sm text-center margin-top-sm" @click="refresh"><text class="acon-fresh margin-right-xxs text-sm margin-right-sm"></text>换一个</view>
            </view>
          </view>
          
        </view>
        <view class="under-btn margin-top flex justify-end">
          <view class="btn-zdl flex justify-center align-center text-df" @click="close">知道了</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  const emit = defineEmits(["confirm"])
  const arrangeDetails = ref(null)
  
  const list = ref([
    {
      id : 0,
      title : '按摩',
      level:'特级', //1 2 3 
      sex:'女',
      pic:'158',
      time:'14:15-15:15'
    },
    {
      id : 1,
      title : '足疗',
      level:'特级', //1 2 3 
      sex:'女',
      pic:'158',
      time:'14:15-15:15'
    },
    {
      id : 2,
      title : '推拿',
      level:'特级', //1 2 3 
      sex:'女',
      pic:'158',
      time:'14:15-15:15'
    },
    {
      id : 3,
      title : '推拿',
      level:'特级', //1 2 3 
      sex:'女',
      pic:'158',
      time:'14:15-15:15'
    },
    {
      id : 3,
      title : '艾灸',
      level:'特级', //1 2 3 
      sex:'女',
      pic:'158',
      time:'14:15-15:15'
    },
    {
      id : 4,
      title : '足疗',
      level:'特级', //1 2 3 
      sex:'女',
      pic:'158',
      time:'14:15-15:15'
    },
    {
      id : 5,
      title : '推拿',
      level:'特级', //1 2 3 
      sex:'女',
      pic:'158',
      time:'14:15-15:15'
    },
    
  ])
  
  const open = () => {
    arrangeDetails.value.open()
  }
  
  const close = () => {
    arrangeDetails.value.close()
  }
  
  const deleteAp = () => {
    console.log('删除')
  }
  
  const refresh = () => {
    console.log('刷新')
  }
  
  defineExpose({ open, close })
  
</script>

<style lang="scss" scoped>
.bt_tips {
  width: 85rpx;
  height: 20rpx;
  font-size: 14rpx;
  padding-left: 10rpx;
  background: url('~@/static/lxp_ice.png') no-repeat center/contain;
  line-height: 21rpx;
  border-radius: 20rpx;
  // background: #999;
}
.box-con {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding-bottom: 40rpx;
  flex-shrink: 0;
  min-height: 802rpx;
  max-height: 96vh;
  position: relative;
  .middle-con{
    margin: 0 auto;
    border-radius: 4rpx;
    background: #F9FBFF;
  }
  .color71{
    color: #717171;
  }
  .xqul{
    .conli{
      width: 184rpx;
      border-radius: 10rpx;
      border: 1px solid #F3F3FF;
      background: #FFF;
    }
  }
  .clolorLv{
    color: rgba(86, 191, 122, 0.70);
  }
  .qian-red{
    color: #FF6D6D;
  }
  .tiemli{
    
    color: #56BF7A;
    font-size: 24rpx;
    border-radius: 8rpx;
    background: #F6F7F9;
  }
  .under-btn{
    .btn-zdl{
      width: 320rpx;
      height: 80rpx;
      border-radius: 46rpx;
      background: #56BF7A;
      color: #fff;
    }
  }
  .ampai-mar{
    margin-right: 7.6%;
    &:nth-child(3n){
      margin-right: 0;
    }
  }
}
</style>